<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../resources/common.js"></script>
<script src="../resources/picker-common.js"></script>
</head>
<body>
<select id="menu" style="background-color:white; color:black;">
  <option>foo</option>
  <optgroup label="Group" style="background-color:black; color:white;">
    <option style="background-color:white; color:black;">bar</option>
  </optgroup>
  <optgroup label="Group2" style="display:none;">
    <option>baz</option>
  </optgroup>
</select>
<script>
description('Check if an OPTION style is serialized with comparison with the parent OPTGROUP style.');
var menuElement = document.getElementById('menu');
var params = null;

function openPickerErrorCallback() {
    testFailed('picker didn\'t open')
    finishJSTest();
}
openPicker(menu, test1, openPickerErrorCallback);
function test1() {
    params = internals.pagePopupWindow.global.params;
    shouldBeEqualToString('params.children[1].type', 'optgroup');
    shouldBeUndefined('params.children[1].children[0].type');
    shouldBeEqualToString('params.children[1].children[0].style.color', '#000000');
    shouldBeEqualToString('params.children[1].children[0].style.backgroundColor', '#ffffff');

    finishJSTest();
}
</script>
</body>
</html>
